<!-- 视频上传 -->
<template>
  <div style="line-height: initial;" :id="dynamicID">
    <a-upload
      :accept="fileType.join(',')"
      list-type="picture-card"
      class="noPadding"
      :multiple="limit !== 1"
      :disabled="disabled"
      :headers="headers"
      :action="uploadApi.apk"
      :file-list="fileList"
      :show-upload-list="false"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <template v-if="fileList.length">
        <div v-for="(item,index) in fileList" :key="item.uid" class="disFlxCC fileBody" :style="`width:${width}px;height:${height}px;`">
          <template v-if="item.percent < 100">
            <div class="ant-upload-list-item-uploading-text"></div>
            <a-progress :percent="item.percent" size="small" :showInfo="false" :strokeWidth="2" />
          </template>
          <template v-else>
            <video 
              :id="item.uid"
              :src="item.thumbUrl" 
              :style="`width:${width}px;height:${height}px;`" 
            />
            
            <div class="shadeBox" @click.stop>
              <a-icon
                type="play-circle"
                class="fz-16 _p-5"
                style="color:#FFF;"
                @click.stop="playVideo(item.thumbUrl)"
              />
              <a-icon v-if="!disabled" type="delete" class="fz-16 _p-5" style="color:#FFF;" @click.stop="handDelete(index)" />
            </div>
          </template>
        </div>
        
        <VideoPlay ref="VideoPlay" />
      </template>

      <div
        v-else-if="(limit === 0 || fileList.length < limit) && !disabled"
        style="height: 100%;"
        class="disFlxCC upLoadBtn"
      >
        <a-icon type="plus" class="fz-28" style="color:#999;" />
        <div class="fz-12 _pt-5" style="color:#999;"><slot name="tips" /></div>
        <div v-if="warehouse" v-has="'content:warehouse:list'" class="warehouseBtn" @click.stop="openWarehouse">从素材库选择</div>
      </div> 
    </a-upload>

    <!-- 上传提示 -->
    <div v-if="!disabled" v-html="tipText"></div>

    <!-- 素材库 -->
    <WarehouseModal 
    v-if="warehouse" 
    ref="WarehouseModal" 
    :limit="limit"
    :fileSource="fileSource"
    @select="handSelectImgs" />
  </div>
</template>
<script>
import WarehouseModal from '@/components/UpFile/warehouseModal'
import VideoPlay from '@/components/ImgOrVideo/videoPlay'
import { props, watch, computed, data, methods } from './mixin'

export default {
  components: {
    WarehouseModal,
    VideoPlay
  },
  props: {
    ...props,
    // video
    fileSource: {
      type: String,
      default: 'video'
    },
    // 上传类型范围 例如['.mp4']
    fileType: {
      type: Array,
      default: () => ['.mp4']
    },
  },
  mounted() {
    this.upDom()
  },
  computed: {
    ...computed
  },
  watch: {
    ...watch
  },
  data() {
    return {
      ...data
    }
  },
  methods: {
    ...methods,
    // 素材库选择
    openWarehouse() {
      this.$refs.WarehouseModal.show()
    },
    // 素材库选择图片后
    handSelectImgs(imgs) {
      this.urlPushFileList(imgs);
      this.upVmodel() // 更新v-model
    },
    // 播放视频
    playVideo(url) {
      this.$refs.VideoPlay.show(url)
    },
    // 手动删除
    handDelete(index) {
      this.fileList.splice(index, 1)
      this.upVmodel()
    }
  }
}
</script>
<style lang="less" scoped>
.fileBody {
  position: relative;
  .shadeBox {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s;
  }
  &:hover {
    .shadeBox {
      opacity: 1;
    }
  }
}
</style>